<template>
    <div class="account-box">
        <div class="form">
            <!--
                v-slot="{ errors }"
                作用域插槽 把组件内部自己封装好的包含了所有未通过提示语的错误对象出来
            -->
            <Form
                ref="formTarget"
                class="form"
                :validation-schema="mySchema"
                v-slot="{ errors }"
                autocomplete="off"
            >
                <div class="form-item">
                    <div class="input">
                        <i class="iconfont icon-user"></i>
                        <!-- <input type="text" placeholder="请输入用户名或手机号" /> -->
                        <Field
                            v-model="form.account"
                            name="account"
                            type="text"
                            placeholder="请输入用户名"
                            :class="{ error: errors.account }"
                        />
                    </div>
                    <!-- 表单验证错误信息提示 -->
                    <!-- 校验不通过的时候才显示  v-if -->
                    <!-- errors.account：如果有值 就代表校验没过 -->
                    <!-- 表单验证错误信息提示 -->
                    <div class="error" v-if="errors.account">
                        <i class="iconfont icon-warning" />
                        {{ errors.account }}
                    </div>
                </div>
                <div class="form-item">
                    <div class="input">
                        <i class="iconfont icon-lock"></i>
                        <!-- <input type="password" placeholder="请输入密码" /> -->
                        <Field
                            :class="{ error: errors.password }"
                            v-model="form.password"
                            name="password"
                            type="password"
                            placeholder="请输入密码"
                        />
                    </div>
                    <div class="error" v-if="errors.password">
                        <i class="iconfont icon-warning" />
                        {{ errors.password }}
                    </div>
                </div>
            </Form>
            <a href="javascript:;" class="btn" @click="doLogin">登录</a>
        </div>
    </div>
</template>
<script>
// 插件内置的俩个组件
// 每个组件有自己各自需要完成的具体功能
import { Form, Field } from 'vee-validate'
import { reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import Message from '@/components/Message/index.js'
import { findCartList } from '@/api/cart'
export default {
  components: {
    Form, Field
  },
  setup () {
    // 定义表单双向绑定的数据
    const form = reactive({
      account: '13012345691', // 账号
      password: '123456'// 密码
    })
    // 定义我们自己的校验对象
    const mySchema = {
      account (value) {
        if (!value) return '请输入用户名'
        return true
      },
      password (value) {
        if (!value) return '请输入密码'
        if (!/^\w{6,24}$/.test(value)) return '密码是6-24个字符'
        return true
      }
    }
    // 兜底校验
    const formTarget = ref(null)
    const store = useStore()
    const route = useRoute()
    const router = useRouter()
    async function doLogin () {
      console.log(formTarget.value.validate())
      const result = await formTarget.value.validate()
      console.log(result)
      if (result) {
        // todo login
        // 登录 -> token -> vuex
        // 触发action函数
        await store.dispatch('user/doLogin', form)
        // 拉取一下最新的当前用户的购物车列表数据 同步过来 放入vuex
        const res = await findCartList()
        // 再次存入vuex做更新
        store.commit('cart/setCartFn', res.data.result)
        // 跳转首页
        // 路由跳转会等到action中的异步请求完事之后才跳转吗？
        // 不能保证，必须加上await 然后才可以
        // 保证数据已经拿到之后才能跳转！！
        const redirect = route.query.redirect
        router.push(redirect ? decodeURIComponent(redirect) : '/')
        // 提示用户登录成功
        Message({ type: 'success', text: '登录成功' })
      }
    }
    return {
      form, mySchema, formTarget, doLogin
    }
  }
}
</script>
<style lang="less" scoped>
// 账号容器
.account-box {
    .toggle {
        padding: 15px 40px;
        text-align: right;
        a {
            color: @xtxColor;
            i {
                font-size: 14px;
            }
        }
    }
    .form {
        padding: 0 20px 20px 20px;
        &-item {
            margin-bottom: 28px;
            .input {
                position: relative;
                height: 36px;
                > i {
                    width: 34px;
                    height: 34px;
                    background: #cfcdcd;
                    color: #fff;
                    position: absolute;
                    left: 1px;
                    top: 1px;
                    text-align: center;
                    line-height: 34px;
                    font-size: 18px;
                }
                input {
                    padding-left: 44px;
                    border: 1px solid #cfcdcd;
                    height: 36px;
                    line-height: 36px;
                    width: 100%;
                    &.error {
                        border-color: @priceColor;
                    }
                    &.active,
                    &:focus {
                        border-color: @xtxColor;
                    }
                }
                .code {
                    position: absolute;
                    right: 1px;
                    top: 1px;
                    text-align: center;
                    line-height: 34px;
                    font-size: 14px;
                    background: #f5f5f5;
                    color: #666;
                    width: 90px;
                    height: 34px;
                    cursor: pointer;
                }
            }
            > .error {
                position: absolute;
                font-size: 12px;
                line-height: 28px;
                color: @priceColor;
                i {
                    font-size: 14px;
                    margin-right: 2px;
                }
            }
        }
        .agree {
            a {
                color: #069;
            }
        }
        .btn {
            display: block;
            width: 100%;
            height: 40px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            background: @xtxColor;
            &.disabled {
                background: #cfcdcd;
            }
        }
    }
    .action {
        padding: 20px 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .url {
            a {
                color: #999;
                margin-left: 10px;
            }
        }
    }
}
</style>
